{% extends "base.html" %}

{% block title %} {{ submit_type }} Your Watch Item {% endblock %}

{% block head %}
<link rel="stylesheet" href="/css/datepicker.css" type="text/css" />
<script type="text/javascript" src="/javascript/datepicker.js"></script>

{% endblock %}


{% block maincontent %}
    <h1>  {{ submit_type }} Watch Item</h1>
    <form action="" method='post'>

    <input type="hidden" name="watch_item_id"
           value="{{watch_item.id}}" />

    <ul>

{# Begin Error Handling for keyword#}
    {% if keyword_missing %}
       <li><div role="alert" tabindex="0" class="error">
            Watch item key word is missing.</div></li>
    {% endif %}
    {% if invalid_keyword %}
        <li><div role="alert" tabindex="0" class="error">
            Watch item key word is not valid.</div></li>
    {% endif %}
{# End error handling for key word #}

    <li class="fields">
        <label class="labelandfield" for="keyword">
            Keyword: </label>
        <input onfocus="show_help_text('keyword_help')"
               onblur="clear_help_text('keyword_help')"
               type="text" id="keyword" name="keyword"
               {% if watch_item.keyword == ' ' %}
               value=""
               {% else %}
               value="{{watch_item.keyword}}"
               {%  endif %}
               aria-describedby="owner_help"/>
        <span id="keyword_help" class="help">
            This is the keyword to find the item you are looking for.</span>
    </li>

{# Begin Error Handling #}
    {% if end_date_too_early %}
        <li>
        <div role="alert" tabindex="0" class="error">
            End Date can not be earlier than Start Date.</div></li>
    {% endif %}
    {% if start_date_too_early %}
        <li>
        <div role="alert" tabindex="0" class="error">
            Start Date can not be earlier than today.</div></li>
    {% endif %}
    {% if start_date_invalid_value %}
        <li>
        <div role="alert" tabindex="0" class="error">
            Start Date provided is not a valid Start Date.</div></li>
    {% endif %}

{# End Error Handling #}

<li class="fields">
<label class="labelandfield" for="start_date">Start Date: </label>
        <select name="start_date_month" id="start_date_month"
                onfocus="show_help_text('start_date_help')"
                onblur="clear_help_text('start_date_help')"
                aria-describedby="start_date_help">
<option value="01" {% if watch_item.start_date.month == 1 %}selected="selected"{% endif %}>Jan</option>
<option value="02" {% if watch_item.start_date.month == 2 %}selected="selected"{% endif %}>Feb</option>
<option value="03" {% if watch_item.start_date.month == 3 %}selected="selected"{% endif %}>Mar</option>
<option value="04" {% if watch_item.start_date.month == 4 %}selected="selected"{% endif %}>Apr</option>
<option value="05" {% if watch_item.start_date.month == 5 %}selected="selected"{% endif %}>May</option>
<option value="06" {% if watch_item.start_date.month == 6 %}selected="selected"{% endif %}>Jun</option>
<option value="07" {% if watch_item.start_date.month == 7 %}selected="selected"{% endif %}>Jul</option>
<option value="08" {% if watch_item.start_date.month == 8 %}selected="selected"{% endif %}>Aug</option>
<option value="09" {% if watch_item.start_date.month == 9 %}selected="selected"{% endif %}>Sep</option>
<option value="10" {% if watch_item.start_date.month == 10 %}selected="selected"{% endif %}>Oct</option>
<option value="11" {% if watch_item.start_date.month == 11 %}selected="selected"{% endif %}>Nov</option>
<option value="12" {% if watch_item.start_date.month == 12 %}selected="selected"{% endif %}>Dec</option>
        </select>
        <select name="start_date_day" id="start_date_day"
                onfocus="show_help_text('start_date_help')"
                onblur="clear_help_text('start_date_help')"
                aria-describedby="start_date_help">
<option value="01"{% if watch_item.start_date.day == 1 %} selected="selected"{% endif %}>1</option>
<option value="02"{% if watch_item.start_date.day == 2 %} selected="selected"{% endif %}>2</option>
<option value="03"{% if watch_item.start_date.day == 3 %} selected="selected"{% endif %}>3</option>
<option value="04"{% if watch_item.start_date.day == 4 %} selected="selected"{% endif %}>4</option>
<option value="05"{% if watch_item.start_date.day == 5 %} selected="selected"{% endif %}>5</option>
<option value="06"{% if watch_item.start_date.day == 6 %} selected="selected"{% endif %}>6</option>
<option value="07"{% if watch_item.start_date.day == 7 %} selected="selected"{% endif %}>7</option>
<option value="08"{% if watch_item.start_date.day == 8 %} selected="selected"{% endif %}>8</option>
<option value="09"{% if watch_item.start_date.day == 9 %} selected="selected"{% endif %}>9</option>
<option value="10"{% if watch_item.start_date.day == 10 %} selected="selected"{% endif %}>10</option>
<option value="11"{% if watch_item.start_date.day == 11 %} selected="selected"{% endif %}>11</option>
<option value="12"{% if watch_item.start_date.day == 12 %} selected="selected"{% endif %}>12</option>
<option value="13"{% if watch_item.start_date.day == 13 %} selected="selected"{% endif %}>13</option>
<option value="14"{% if watch_item.start_date.day == 14 %} selected="selected"{% endif %}>14</option>
<option value="15"{% if watch_item.start_date.day == 15 %} selected="selected"{% endif %}>15</option>
<option value="16"{% if watch_item.start_date.day == 16 %} selected="selected"{% endif %}>16</option>
<option value="17"{% if watch_item.start_date.day == 17 %} selected="selected"{% endif %}>17</option>
<option value="18"{% if watch_item.start_date.day == 18 %} selected="selected"{% endif %}>18</option>
<option value="19"{% if watch_item.start_date.day == 19 %} selected="selected"{% endif %}>19</option>
<option value="20"{% if watch_item.start_date.day == 20 %} selected="selected"{% endif %}>20</option>
<option value="21"{% if watch_item.start_date.day == 21 %} selected="selected"{% endif %}>21</option>
<option value="22"{% if watch_item.start_date.day == 22 %} selected="selected"{% endif %}>22</option>
<option value="23"{% if watch_item.start_date.day == 23 %} selected="selected"{% endif %}>23</option>
<option value="24"{% if watch_item.start_date.day == 24 %} selected="selected"{% endif %}>24</option>
<option value="25"{% if watch_item.start_date.day == 25 %} selected="selected"{% endif %}>25</option>
<option value="26"{% if watch_item.start_date.day == 26 %} selected="selected"{% endif %}>26</option>
<option value="27"{% if watch_item.start_date.day == 27 %} selected="selected"{% endif %}>27</option>
<option value="28"{% if watch_item.start_date.day == 28 %} selected="selected"{% endif %}>28</option>
<option value="29"{% if watch_item.start_date.day == 29 %} selected="selected"{% endif %}>29</option>
<option value="30"{% if watch_item.start_date.day == 30 %} selected="selected"{% endif %}>30</option>
<option value="31"{% if watch_item_start_date.day == 31 %} selected="selected"{% endif %}>31</option>
        </select>
        <select name="start_date_year" id="start_date_year"
                onfocus="show_help_text('start_date_help')"
                onblur="clear_help_text('start_date_help')"
                aria-describedby="start_date_help">
<option value="2012"{% if watch_item.start_date.year == 2012 %} selected="selected"{% endif %}>2012</option>
<option value="2013"{% if watch_item.start_date.year == 2013 %} selected="selected"{% endif %}>2013</option>
<option value="2014"{% if watch_item.start_date.year == 2014 %} selected="selected"{% endif %}>2014</option>
<option value="2015"{% if watch_item.start_date.year == 2015 %} selected="selected"{% endif %}>2015</option>
<option value="2016"{% if watch_item.start_date.year == 2016 %} selected="selected"{% endif %}>2016</option>
        </select>

    {% if end_date_invalid_value %}
        <li>
        <div role="alert" tabindex="0" class="error">
            End Date provided is not a valid End Date.</div></li>
    {% endif %}

        <span id="start_date_help" class="help">
            This is the date in which the notification will go out.</span>
    <li class="fields">
        <label class="labelandfield" for="end_date">End Date: </label>

        <select name="end_date_month" id="end_date_month"
                onfocus="show_help_text('end_date_help')"
                onblur="clear_help_text('end_date_help')"
                aria-describedby="end_date_help">
<option value="01"{% if watch_item.end_date.month == 1 %} selected="selected"{% endif %}>Jan</option>
<option value="02"{% if watch_item.end_date.month == 2 %} selected="selected"{% endif %}>Feb</option>
<option value="03"{% if watch_item.end_date.month == 3 %} selected="selected"{% endif %}>Mar</option>
<option value="04"{% if watch_item.end_date.month == 4 %} selected="selected"{% endif %}>Apr</option>
<option value="05"{% if watch_item.end_date.month == 5 %} selected="selected"{% endif %}>May</option>
<option value="06"{% if watch_item.end_date.month == 6 %} selected="selected"{% endif %}>Jun</option>
<option value="07"{% if watch_item.end_date.month == 7 %} selected="selected"{% endif %}>Jul</option>
<option value="08"{% if watch_item.end_date.month == 8 %} selected="selected"{% endif %}>Aug</option>
<option value="09"{% if watch_item.end_date.month == 9 %} selected="selected"{% endif %}>Sep</option>
<option value="10"{% if watch_item.end_date.month == 10 %} selected="selected"{% endif %}>Oct</option>
<option value="11"{% if watch_item.end_date.month == 11 %} selected="selected"{% endif %}>Nov</option>
<option value="12"{% if watch_item.end_date.month == 12 %} selected="selected"{% endif %}>Dec</option>
        </select>
        <select name="end_date_day" id="end_date_day"
                onfocus="show_help_text('end_date_help')"
                onblur="clear_help_text('end_date_help')"
                aria-describedby="end_date_help">
<option value="01"{% if watch_item.end_date.day == 1 %} selected="selected"{% endif %}>1</option>
<option value="02"{% if watch_item.end_date.day == 2 %} selected="selected"{% endif %}>2</option>
<option value="03"{% if watch_item.end_date.day == 3 %} selected="selected"{% endif %}>3</option>
<option value="04"{% if watch_item.end_date.day == 4 %} selected="selected"{% endif %}>4</option>
<option value="05"{% if watch_item.end_date.day == 5 %} selected="selected"{% endif %}>5</option>
<option value="06"{% if watch_item.end_date.day == 6 %} selected="selected"{% endif %}>6</option>
<option value="07"{% if watch_item.end_date.day == 7 %} selected="selected"{% endif %}>7</option>
<option value="08"{% if watch_item.end_date.day == 8 %} selected="selected"{% endif %}>8</option>
<option value="09"{% if watch_item.end_date.day == 9 %} selected="selected"{% endif %}>9</option>
<option value="10"{% if watch_item.end_date.day == 10 %} selected="selected"{% endif %}>10</option>
<option value="11"{% if watch_item.end_date.day == 11 %} selected="selected"{% endif %}>11</option>
<option value="12"{% if watch_item.end_date.day == 12 %} selected="selected"{% endif %}>12</option>
<option value="13"{% if watch_item.end_date.day == 13 %} selected="selected"{% endif %}>13</option>
<option value="14"{% if watch_item.end_date.day == 14 %} selected="selected"{% endif %}>14</option>
<option value="15"{% if watch_item.end_date.day == 15 %} selected="selected"{% endif %}>15</option>
<option value="16"{% if watch_item.end_date.day == 16 %} selected="selected"{% endif %}>16</option>
<option value="17"{% if watch_item.end_date.day == 17 %} selected="selected"{% endif %}>17</option>
<option value="18"{% if watch_item.end_date.day == 18 %} selected="selected"{% endif %}>18</option>
<option value="19"{% if watch_item.end_date.day == 19 %} selected="selected"{% endif %}>19</option>
<option value="20"{% if watch_item.end_date.day == 20 %} selected="selected"{% endif %}>20</option>
<option value="21"{% if watch_item.end_date.day == 21 %} selected="selected"{% endif %}>21</option>
<option value="22"{% if watch_item.end_date.day == 22 %} selected="selected"{% endif %}>22</option>
<option value="23"{% if watch_item.end_date.day == 23 %} selected="selected"{% endif %}>23</option>
<option value="24"{% if watch_item.end_date.day == 24 %} selected="selected"{% endif %}>24</option>
<option value="25"{% if watch_item.end_date.day == 25 %} selected="selected"{% endif %}>25</option>
<option value="26"{% if watch_item.end_date.day == 26 %} selected="selected"{% endif %}>26</option>
<option value="27"{% if watch_item.end_date.day == 27 %} selected="selected"{% endif %}>27</option>
<option value="28"{% if watch_item.end_date.day == 28 %} selected="selected"{% endif %}>28</option>
<option value="29"{% if watch_item.end_date.day == 29 %} selected="selected"{% endif %}>29</option>
<option value="30"{% if watch_item.end_date.day == 30 %} selected="selected"{% endif %}>30</option>
<option value="31"{% if watch_item.end_date.day == 31 %} selected="selected"{% endif %}>31</option>
        </select>
        <select name="end_date_year" id="end_date_year"
                onfocus="show_help_text('end_date_help')"
                onblur="clear_help_text('end_date_help')"
                aria-describedby="end_date_help">
<option value="2012"{% if watch_item.end_date.year == 2012 %} selected="selected"{% endif %}>2012</option>
<option value="2013"{% if watch_item.end_date.year == 2013 %} selected="selected"{% endif %}>2013</option>
<option value="2014"{% if watch_item.end_date.year == 2014 %} selected="selected"{% endif %}>2014</option>
<option value="2015"{% if watch_item.end_date.year == 2015 %} selected="selected"{% endif %}>2015</option>
<option value="2016"{% if watch_item.end_date.year == 2016 %} selected="selected"{% endif %}>2016</option>
        </select>
{# End No JavaScript End Date Selection #}
        <span id="end_date_help" class="help">
            This is the date in which the notification will stop.</span>

    </ul>
    <input type="submit" id="next_with_margin"
           {%  if submit_type == 'Add' %}
           name="add_watch_item_submit"
           {%  else %}
           name="edit_watch_item_submit"
           {% endif %}
           value="{{ submit_type }}"/>

    <input type="submit" id="next"
           name="cancel_submit"
           value="Cancel"/>

    </form>

{% endblock %}
